<template>
	<view class="form-item">
		<picker mode="multiSelector" :range="pickerData" @change="bindPickerChange" :value="changeIndex"
			:disabled="disabled"  @columnchange="columnchange" >
			<view class="input-item" :class="{'fullinput': !showIcon}"><text
					:class="[changeIndex && changeIndex.length > 0  ? 'changed' : 'placeholder']">{{changeIndex && changeIndex.length > 0 && currentValue || placeholder}}</text>
			</view>
		</picker>
		<template v-if="showIcon">
			<uni-icons v-if="!(changeIndex && changeIndex.length > 0)" type="bottom" size="16" color="#c0c4cc">
			</uni-icons>
			<uni-icons v-else-if="!disabled" @click="clearValue" type="clear" size="16" color="#c0c4cc"></uni-icons>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			value: String,
			disabled: Boolean,
			showIcon: {
				type: Boolean,
				default: true
			},
			items: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				pickerData: [[], []],
				currentValue: '',
				changeIndex: []
			}
		},
		watch: {
			value: {
				async handler(n) {
					console.log('nnn', n)
					this.buildOptions()
					this.initValue()
					this.currentValue = n
				},
				immediate: true
			},
			items () {
				this.initValue()
			}
		},
		methods: {
			initValue () {
				if (!this.value) {
					// this.changeIndex = []
					return
				}
				this.changeIndex = this.items.map(d => {
					return 0
				})
				console.log('this.items', this.items)
			},
			bindPickerChange(e) {
				this.changeIndex = e.detail.value
				console.log('this.changeIndex', this.changeIndex)
				let data = this.changeIndex.map((d, i) => {
					return this.pickerData[i][d]
				})
				console.log('data22', data)
				this.currentValue = data.join(',')
				this.$emit('input', data)
			},
			buildOptions () {
				this.pickerData = this.items.map((d, index) => {
					let data = d
					for(let i = 0; i < index; i++){
						if (data && data.length > 0) {
							data = data[0]
						} else {
							data = ['无数据']
						}
					}
					return data
				})
			},
			 // 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					let columnIndex = e.detail.column + 1
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.pickerData[columnIndex] = this.items[columnIndex][e.detail.value]
					// #endif

					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					 this.$set(this.pickerData, columnIndex, this.items[columnIndex][e.detail.value])
					// #endif
				}
			},
			clearValue() {
				this.changeIndex = []
				this.$emit('input', [])
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		uni-picker {
			width: 100%;
		}

		picker {
			width: 100%;
		}
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-right: 5px;
		height: 100%;

		&.disabled {
			cursor: not-allowed;
		}

		.input-item {
			width: calc(100% - 80px);
			padding: 0 10px;

			.changed {
				color: #333;
			}
			&.fullinput {
				width: calc(100% - 50px);
			}
		}

		.placeholder {
			color: #999999;
		}
	}
</style>
